<template>
  <view class="wrap">
    <uv-navbar :fixed="false" title="兴趣标签" autoBack safeAreaInsetTop placeholder :border='false'>
      <template v-slot:right>
        <view class="navEditName nav-right" @click="tap">保存</view>
      </template>
    </uv-navbar>
    <view class="box">
      <view class="form" v-if="select.length">
        <view class="title">已添加的标签</view>
        <view class="list">
          <view class="item" v-for="(item,index) in select" :key="index">
            <text class="test">{{ item.name }}</text>
            <image src="../../static/delete.png" class="img" @click="deleteItem(item)"></image>
          </view>
        </view>
      </view>
      <view class="form">
        <view class="title">添加你感兴趣的标签</view>
        <view class="list">
          <view class="item" v-for="(item,index) in list" :key="index" @click="addTag(item)">
            <text class="test">{{ item.name }}</text>
            <image src="../../static/addTag.png" class="img"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { post } from '/api';
import { toast } from '@/common';
import { useUser } from '@/store';

const store = useUser();
const userInfo = store.userDetail;
let list = ref([]);
let select = ref(userInfo.tag);

onMounted(() => {
  getList();
})
function tap(){
  if(!select.value.length) return toast('请选择兴趣标签');
  setUser();
}
function getList(){
  post('api/user/getTagList', { type: 2 }).then(res => {
    if(res.code == 1){
      const data = res.data;
      list.value = data;
    }
  })
}
function setUser(){
  const params = {
    tag_ids: select.value.map(e => e.id).toString(),
  }
  post('api/user/profile', params).then(res => {
    if(res.code == 1){
      toast('修改成功');
      getUserInfoDetail();
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000)
    }
  })
}
function getUserInfoDetail(){
  const params = {
    access_user_id: userInfo.id
  }
  post('api/user/getUserDetail', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      uni.setStorageSync('userDetail', data);
      useUser().setUserDetail(data);
    }
  })
}
// 新增标签
function addTag(row){
  const index = select.value.findIndex(o => o.id == row.id);
  if(index == -1){
    select.value = [row, ...select.value];
  }
}
// 删除标签
function deleteItem(row){
  const index = select.value.findIndex(o => o.id == row.id);
  select.value.splice(index, 1);
}
</script>

<style lang="scss" scoped>
  .box{
    .form{
      padding: 40rpx 30rpx;
      border-bottom: 1px solid #E6E6E6;
      &:last-child{
        border-bottom: 0;
      }
      .list{
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .item{
          position: relative;
          height: 80rpx;
          line-height: 80rpx;
          background: #F5F5F5;
          border-radius: 16rpx;
          padding: 0 40rpx;
          margin-right: 20rpx;
          .img{
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            right: -4rpx;
            top: -4rpx;
          }
          .test{
            font-weight: 400;
            font-size: 28rpx;
            color: #2B2B2B;
          }
        }
      }
      .title{
        font-weight: 500;
        font-size: 28rpx;
        color: #737373;
        padding-bottom: 25rpx;
      }
    }
  }
  .navEditName{
    font-weight: 400;
    font-size: 28rpx;
    &.nav-right{
      color: #E43222;
    }
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
  }
</style>